<template>
  <div class="app">
    <header class="header">
      <h1>AI工具集</h1>
    </header>
    <main class="main">
      <Sidebar 
        :menu-items="menuData" 
        :current-category="currentCategory"
        @select-category="handleCategorySelect"
      />
      <div class="content">
        <div class="tools-section">
          <h2>{{ currentCategory }}</h2>
          <div class="tools-grid">
            <ToolCard
              v-for="tool in currentTools"
              :key="tool.name"
              :name="tool.title"
              :description="tool.subtitle"
              :icon="tool.avatar"
              :url="tool.link"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import Sidebar from './components/Sidebar.vue';
import ToolCard from './components/ToolCard.vue';
import type { MenuItem } from './types';

interface ToolData {
  title: string;
  subtitle: string;
  avatar: string;
  link: string;
  path?: string;
  recommendation?: boolean;
}

const menuData = ref<MenuItem[]>([]);
const aiData = ref<Record<string, ToolData>>({});
const currentCategory = ref('热门工具');

// 从public文件夹加载数据
const loadData = async () => {
  try {
    const [menuResponse, aiDataResponse] = await Promise.all([
      fetch('/menu.json'),
      fetch('/aidatas.json')
    ]);
    menuData.value = await menuResponse.json();
    aiData.value = await aiDataResponse.json();
  } catch (error) {
    console.error('Failed to load data:', error);
  }
};

onMounted(() => {
  loadData();
});

const handleCategorySelect = (category: string) => {
  currentCategory.value = category;
};

const findMenuItems = (category: string): string[] => {
  const findInMenu = (items: MenuItem[]): string[] => {
    for (const item of items) {
      if (item.menuName === category) {
        return item.items || [];
      }
      if (item.children) {
        const found = findInMenu(item.children);
        if (found.length > 0) return found;
      }
    }
    return [];
  };
  return findInMenu(menuData.value);
};

const currentTools = computed(() => {
  const items = findMenuItems(currentCategory.value);
  return items.map(name => ({
    name,
    ...aiData.value[name]
  })).filter(tool => tool.title); // 只返回存在的工具
});
</script>

<style scoped lang="scss">
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  
  h1 {
    margin: 0;
    color: #333;
  }
}

.main {
  display: flex;
  flex: 1;
}

.content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.tools-section {
  h2 {
    margin-bottom: 1.5rem;
    color: #333;
  }
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
</style> 